<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>Log 5: Controller</title>
<style>
body{
	background: #E1E1E1;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#main{
	background: #FFFFFF;
	width: 800px;
	display: block;
	margin: 0 auto;
	min-height: 100px;
	padding: 25px 10px;
	text-align: center;
}
h1{
	text-align: center;
	margin-bottom: 20px;
}
h2{
	text-align: center;
	margin: 20px auto;
	font-size: 18px;
}
h3{
	text-align: center;
	margin: 20px auto;
	font-size: 16px;
}
#id{
	font-weight: bold;
}
img{
	margin: 0 auto;
	width: 128px;
	display: block;
}
button{
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	margin: 10px;
	width: 128px;
	height: 128px;
}
#status{
	font-size: 80px;
	text-transform: uppercase;
	font-family: "Lucida Console", Monaco, monospace;
	font-weight: bold;
	text-align: center;
	margin: 20px auto;
}
#status.off{
	color: #FF0000;
}
#status.on{
	color: #00FF00;
}
.credits{
  width: 350px;
  margin: 15px auto;
  display: block;
  padding: 6px 0px;
  font-family: "Trebuchet MS";
  font-weight: bold;
  font-size: 18px;
  background: #3E3E3E;
  color: #E3E3E3;
  text-align: center;
  cursor: pointer;
}
</style>
</head>

<body>

<div class="credits" onclick="location.href='http://brandonep.org/'">
Developed by Brandon Phillips
</div>

<div id="main">
	<h1>Controller</h1>
	<h2>Visit <a href="http://brandonep.org/log5/device">http://brandonep.org/log5/device</a> in a new window or on another computer.</h2>
	<h3>If you don't see your Device ID in the list. Refresh a this page. You might have to do this a few times since the server
	sometimes takes a while to register a device.</h3>
	<h2>Select a device:</h2>
	<select id="devices" name="devices">
	  <option value="-1">Loading...</option>
	</select><br />
</div>

<div class="credits" onclick="location.href='http://brandonep.org/'">
Developed by Brandon Phillips
</div>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
<script type="text/javascript">

var id = "";
var token = "";
var channel;
var socket;

function sendMessage(path, data, dataType){
  return $.get("/log5/"+path, data, function(){}, dataType);
}

var onOpened = function(){
  //Send back list of devices in response and populate dorpdown
  var xhr = sendMessage("controller", {"opened":"", "id":id, "token":token}, "json");
  xhr.done(function(data){
	var devs = data.devices;
	$list = $("#devices");
	$list.empty();
	
	if(devs.length < 1){
	  $list.add($("<option value=\"-1\">No devices connected. (Try refreshing)</option>"));
	  return -1;
	}
	
	for(var i = 0; i < devs.length; i++){
	  var $option = $("<option></option>");
	  $option.text(devs[i]);
	  $option.attr("value", devs[i]);
	  $list.append($option);
	}
	
	$red = $("<button></button>");
	$red.addClass("button");
	$red.addClass("red");
	$red.text("Turn Off");
	
	$green = $("<button></button>");
	$green.addClass("button");
	$green.addClass("green");
	$green.text("Turn On");
	
	$("#main").append($green).append($red)
	  .on("click", ".green", function(eo){
		sendMessage("device", {"id":$("#devices").val(), "command": "on"});
	  })
	  .on("click", ".red", function(eo){
		sendMessage("device", {"id":$("#devices").val(), "command": "off"});
	  });
  });
  xhr.fail(function(err){
	alert("failed to open channel to server: " + err);
  });
};
var onMessage = function(message){
  var j = JSON.parse(message);
  
};

var getReq = $.get(
  "/log5/controller?register",
  function(){},
  "json"
);

getReq.done(function(data){
  id = data.id;
  token = data.token;
  
  channel = new goog.appengine.Channel(token);
  socket = channel.open({
	onopen: onOpened,
	onmessage: onMessage
  });
});

/*getReq.always(function(xhr, err, data){
  var j = JSON.parse("{}");
  id = j.id;
  token = j.token;
  
  channel = new goog.appengine.Channel(token);
  
  channel.onopen = onOpened;
  channel.onmessage = onMessage;
  
  $("span#id").text(j.id);
});*/

</script>

</body>
</html>
